<template>
    <div class="order_list">
        <van-nav-bar title="我的仓库" left-text="" right-text="" left-arrow @click-left="onClickLeft"
            style="background-color: #F5F5F5;position: fixed;width: 100%;" class="van-nav-bar-class">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>

            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>
        <van-tabs class="menu-tabs" v-model="activeIndex" :swipe-threshold="5" sticky offset-top="46" type="line"
            @click="handleTabClick" style="background-color: #F5F5F5;">
            <van-tab v-for="(tabTitle, index) in tabTitles" :key="index" :title="tabTitle" style="margin-top: 30px;">
                <div style="height: 30px;"></div>


                <div class="main2" v-if="orderList.length == 0" style="text-align: center;height: 200px;">
                    <img src="@/assets/homr/Group 9420.png" alt="logo"
                        style="width: 180px;height: 120px;margin-top: 40px;">
                    <div>暂无商品</div>
                </div>
                <van-notice-bar v-if="activeIndex == 0 && orderList.length > 0" color="#663701" background="#ece7e0"
                    style="height: 44px;">提示：您有待支付的订单即将取消，请尽快支付</van-notice-bar>

                <div v-if="activeIndex == 0" v-for="(item, index2) in orderList" :key="index2">
                    <div class="user-order3">
                        <div style="display: flex;padding-top: 10px;">

                            <van-checkbox-group v-model="item.checkbox" v-if="!isPayments">
                                <van-checkbox :name="item.id" style="margin-left: 10px;margin-top: 30px;"
                                    checked-color="#2E512E"></van-checkbox>
                            </van-checkbox-group>

                            <img :src="item.goods.image" alt="" srcset=""
                                style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
                            <div style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;">
                                {{ item.goods.name }}</div>

                            <div style="padding-top: 45px;display: flex">
                                <!-- <div v-if="isPayments"
                                    style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #666666;position: absolute;float: left;left: 135px;">
                                    倒计时：09:36
                                </div>

                                <div v-else
                                    style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #666666;position: absolute;float: left;left: 160px;">
                                    倒计时：09:36
                                </div> -->
                            </div>
                            <div style="padding-top: 70px;display: flex">
                                <div
                                    style="float: right;right: 20px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 12px;color: #666666;position: absolute">
                                    <van-button
                                        style="width: 100px;height: 30px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;"
                                        @click="toOrderDetail(item)">立即支付</van-button>
                                </div>
                                <div v-if="isPayments"
                                    style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
                                    ￥{{ item.total }}
                                </div>
                                <div v-else
                                    style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 160px;">
                                    ￥{{ item.total }}
                                </div>
                            </div>
                        </div>

                        <div style="height: 20px;"></div>
                    </div>
                </div>

                <div v-if="activeIndex == 1" v-for="(item, index2) in orderList" :key="index2">
                    <div class="user-order3" style="margin-top: 10px;">
                        <div style="display: flex;padding-top: 10px;">
                            <img :src="item.goods.image" alt="" srcset=""
                                style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
                            <div
                                style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
                                {{ item.goods.name }}</div>

                            <div style="padding-top: 70px;">

                                <div
                                    style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
                                    ￥{{ item.price }}
                                </div>

                            </div>

                        </div>
                        <van-button
                            style="width: 83px;height: 30px;border: 1px solid #CCCCCC;border-radius: 100px;text-align: center;font-size: 14px;background-color: #fff;color: #000;position: absolute;float: right;right: 110px;"
                            @click="toOrderduihuan(item)">兑换</van-button>

                        <van-button v-if="item.is_recover == 0"
                            style="width: 83px;height: 30px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;position: absolute;float: right;right: 20px;"
                            @click="toOrderweituo(item)">委托</van-button>

                        <van-button v-if="item.is_recover == 1"
                            style="width: 83px;height: 30px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;position: absolute;float: right;right: 20px;"
                            @click="toOrderhuishou(item)">回收</van-button>
                        <div style="height: 40px;"></div>
                    </div>
                </div>

                <div v-if="activeIndex == 2" v-for="(item, index2) in orderList" :key="index2">
                    <div class="user-order3" style="margin-top: 10px;">
                        <div style="display: flex;padding-top: 10px;">
                            <img :src="item.goods.image" alt="" srcset=""
                                style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
                            <div
                                style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
                                {{ item.goods.name }}</div>

                            <div style="padding-top: 70px;display: flex;">

                                <div
                                    style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
                                    ￥{{ item.price }}
                                </div>
                                <div v-if="item.status == 1"
                                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #CB0000;position: absolute;float: right;right: 20px;">
                                    交易中
                                </div>
                                <div v-else
                                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #CB0000;position: absolute;float: right;right: 20px;">
                                    售卖中
                                </div>
                            </div>
                        </div>
                        <div style="height: 10px;"></div>
                        <van-button
                            style="width: 100px;height: 30px;border: 1px solid #CCCCCC;border-radius: 100px;text-align: center;font-size: 14px;background-color: #fff;color: #000;position: absolute;float: right;right: 125px;"
                            @click="viewRecord(item)">查看记录</van-button>



                        <van-button
                            style="width: 100px;height: 30px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;position: absolute;float: right;right: 20px;"
                            @click="quxiaoweiduo(item)">取消委托</van-button>
                        <div style="height: 40px;"></div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

        <div style="margin-top: 40px;" v-if="activeIndex == 0 && orderList.length > 0">
            <van-button v-if="isPayments"
                style="width: 234px;height: 30px;border-radius: 100px;text-align: center;font-size: 15px;color: #389138;height: 44px;border: 1px solid #389138;margin-left: 70px;"
                @click="toOrderisPayments">批量支付</van-button>
            <van-button v-else
                style="width: 234px;height: 30px;border-radius: 100px;text-align: center;font-size: 15px;background-color: #389138;height: 44px;margin-left: 70px;color: #fff"
                @click="toOrderisPayments2">立即支付</van-button>
        </div>
        <div style="margin-top: 40px;" v-if="activeIndex == 1 && orderList.length > 0">
            <van-button
                style="width: 234px;height: 30px;border-radius: 100px;text-align: center;font-size: 15px;background-color: #389138;height: 44px;margin-left: 70px;color: #fff"
                @click="yijianweituo">一键委托</van-button>
        </div>
        <div style="height: 40px;"></div>

        <van-popup v-model="showDialog" position="center" :style="{ height: '70%', width: '90%', borderRadius: '8px' }">
            <div style="text-align: center;margin-top: 20px;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #151515;display: inline-block;">
                    委托协议</div>

                <van-icon name="cross" size="20" style="display: inline-block;position: absolute;right: 20px;"
                    @click="closeDialog" />
            </div>
            <!-- 使用 v-html 插入富文本内容 -->
            <div style="margin-top: 35px;margin-left: 15px;margin-right: 15px;max-width: 100%;" class="divcon">
                <div v-html="richContent"></div>
            </div>

            <div style="text-align: center;">
                <van-button @click="tongyiweituo"
                    style="width: 210px;height: 40px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;margin-top: 100px;">我已同意并委托</van-button>
            </div>
            <div style="height: 30px;"></div>
        </van-popup>


        <van-popup v-model="showDialog2" :style="{ height: '190px', width: '300px', borderRadius: '15px' }">
            <div class="dialog-content" style="text-align: center;">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin: 36px;width: 242px;">
                    取消委托后商品将回到“仓库商品”中是否确认取消委托？
                </div>
                <div style="text-align: center;display: flex;margin-top: 30px;">
                    <div style="width: 120px;height: 44px;background: #389138;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="queding2">
                        <div>继续委托</div>
                    </div>
                    <div style="width: 120px;height: 44px;background: #CCCCCC;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
                        @click="cancek2">
                        <div>取消委托</div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import {
    orderList,
    orderDelete,
    orderConfirm,
    orderCancel,
    orderRefund,
    getorderList
} from '@/api/user'
import { getStore, getTrust, cancel_trust, orderPrepay, getArticle } from '@/api/user'
import { Dialog, Toast } from 'vant';
let previousRouterName = ""
let active = ""
export default {
    name: 'OrderList',


    data() {
        return {
            isPayments: true,
            value: "",
            radio: "",
            keyword: "",
            activeIndex: 0,//空=全部0=未支付3=待发货4=已发货5=已完成
            tabTitles: ['待支付商品', '仓库商品', '委托售卖'],
            orderList: [],
            refreshing: false,
            page: 0,
            limit: 10,
            loading: true,
            orderListEmptyShow: false,
            finished: false,
            showDialog: false,
            showDialog2: false,
            weituId: "",
            richContent: ''
        }
    },

    created() {
        //if (previousRouterName === "OrderConfirm") {
        this.activeIndex = active != "" && active != undefined ? Number(active) : 0;
        console.log(active);
        this.init()
        //}
    },
    mounted() {
        this.init()
    },

    beforeRouteEnter(to, from, next) {
        previousRouterName = from.name;

        // if (from.name === "OrderConfirm") {
        active = from.params.active;
        // }
        next();
    },

    methods: {
        yijianweituo() {
            this.$router.push({
                path: '/isCondirmweituo',
                query: {
                    
                    activeIndex: this.activeIndex
                }
            })
        },
        toOrderisPayments() {
            this.isPayments = false
        },
        toOrderisPayments2() {

            let orderIdArr = []
            for (let i = 0; i < this.orderList.length; i++) {
                if (this.orderList[i].checkbox && this.orderList[i].checkbox.length > 0) {
                    orderIdArr.push(this.orderList[i].checkbox[0])
                }

            }

            if (orderIdArr.length == 0) {
                Toast("请选中要支付的商品")
                return
            }
            orderPrepay({ ids: orderIdArr.join(",") }).then((res) => {
                Toast(res.msg)
                this.init()
            })
        },
        tongyiweituo() {
            let obj = {
                ids: this.weituId
            }
            getTrust(obj).then((res) => {
                this.showDialog = false
                Toast("委托成功")
                this.init()
            })
        },
        toOrderweituo(val) {
            this.weituId = val.id
            this.getArticle()
            this.showDialog = true
        },
        getArticle() {
            let that = this
            getArticle({ ids: "3" }).then((res) => {
                that.richContent = (res.data.content);
            })
        },
        quxiaoweiduo(val) {
            this.weituId = val.id
            this.showDialog2 = true
        },
        closeDialog() {
            this.showDialog = false
        },
        queding2() {
            this.showDialog2 = false
        },
        cancek2() {
            let obj2 = {
                ids: this.weituId
            }
            cancel_trust(obj2).then((res) => {
                this.showDialog2 = false
                Toast("取消委托成功")
                this.init()
            })

        },
        toOrderDetail(val) {

            this.$router.push({
                path: '/order/confirm',
                query: {
                    orderInfo: val,
                    activeIndex: this.activeIndex
                }
            })
        },
        viewRecord(val) {
            this.$router.push({
                path: '/productRecord',
                query: {
                    info: val,
                    activeIndex: this.activeIndex
                }
            })
        },
        toOrderhuishou(val) {
            this.$router.push({
                path: '/recycling',
                query: { cankuInfo: JSON.stringify(val), activeIndex: this.activeIndex }
            })
        },
        toOrderduihuan(val) {
            this.$router.push({
                path: '/changeGood',
                query: { cankuInfo: JSON.stringify(val), activeIndex: this.activeIndex }
            })
        },
        orderDelete(id) {
            let obj = {
                ids: id,

            }
            Dialog.confirm({
                title: '',
                message: '确认是否要删除？',
            })
                .then(() => {
                    // on confirm
                    orderDelete(obj).then(res => {

                        this.init()
                    }).catch(e => { })
                })
                .catch(() => {
                    // on cancel
                });
        },
        onClickLeft() {
            this.$router.back()
        },
        init() {
            this.page = 0
            this.orderList = []
            this.getOrderList(true)
        },
        // 下拉刷新
        onRefresh() {
            this.refreshing = true
            this.page = 0
            this.orderList = []
            this.getOrderList(true)
        },
        getOrderList(init) {
            this.loading = true
            let obj = {
                type: (Number(this.activeIndex) + 1)+"",
                page: 1,
                pageSize: 100,
            }
            // this.orderListEmptyShow = false
            // this.page++
            getStore(obj).then((res) => {
                this.orderList = res.data.list
                this.loading = false

            })
        },
        delOrder(id) {
            this.$dialog
                .confirm({ message: '确定要删除该订单吗?' })
                .then(() => {
                    orderDelete(id).then(() => {
                        this.init()
                        this.$toast('已删除订单')
                    })
                })
                .catch(() => { })
        },
        cancelOrder(id) {
            this.$dialog
                .confirm({ message: '确定要取消该订单吗?' })
                .then(() => {
                    orderCancel(id).then(() => {
                        this.init()
                        this.$toast('已取消该订单')
                    })
                })
                .catch(() => { })
        },
        refundOrder(id) {
            this.$dialog
                .confirm({ message: '确定要申请退款吗?' })
                .then(() => {
                    orderRefund(id).then(() => {
                        this.init()
                        this.$toast('已申请订单退款')
                    })
                })
                .catch(() => { })
        },
        confirmOrder(id) {
            this.$dialog
                .confirm({
                    message: '请确认收到货物, 确认收货后无法撤销!'
                })
                .then(() => {
                    orderConfirm(id).then(() => {
                        this.init()
                        this.$toast('已确认收货')
                    })
                })
                .catch(() => { })
        },
        commentGoods(orderGoodsId, goodsId) {
            this.$router.push({
                path: `/goodsComment/${orderGoodsId}/${goodsId}`
            })
        },
        toPay(orderSn, actualPrice) {
            this.$router.push({ name: 'OrderPay', params: { orderSn, actualPrice } })
        },
        handleTabClick() {
            this.page = 0
            this.orderList = []
            this.getOrderList()
        },

    }
}
</script>
<style scoped>
/deep/ .divcon p>span {
    text-wrap: balance !important;
}
</style>
<style lang="scss">
.menu-tabs .van-tabs__nav {
    background-color: #F5F5F5;

}



.user-order3 {
    width: 702px;
    // height: 700px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}

.user-order4 {
    width: 602px;
    height: 250px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #F5F5F5;

}


.user-order5 {
    width: 602px;
    height: 150px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #F5F5F5;
}

.menu-tabs .van-tabs__line {
    background-color: #2E512E;
}

.van-nav-bar-class .van-nav-bar__content {

    z-index: 99999;
}

.van-nav-bar-class .van-nav-bar__title .van-ellipsis {
    height: 47px !important;
}

.order-list {
    .van-card {
        background: #fff;
        margin-top: 0;
    }

    .van-tabs__wrap {
        background: #fff;
        padding: 4px 0;
    }
}
</style>
<style lang="scss" scoped>
.order_list {
    background: #f5f5f5;

    .order-item {
        background-color: #fff;
        margin: 15px 5px;
        border-radius: 15px;

        .order-title {
            display: flex;
            justify-content: space-between;
            padding: 25px 20px;

            .order-sn {
                text-align: left;
            }

            .order-staus {
                text-align: right;
            }
        }

        .van-card {
            background-color: #fff;
        }

        .total {
            text-align: right;
            padding: 10px;
        }

        .footer_btn {
            text-align: right;
            padding: 10px;

            .van-button {
                margin-left: 10px;
                min-width: 70px;
            }
        }
    }
}
</style>